<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>用户列表</title>
        <link rel="icon" th:href="@{/static/favicon.ico}" />
        <link rel="stylesheet" th:href="@{/static/bootstrap/css/bootstrap.min.css}" />
        <link rel="stylesheet" th:href="@{/static/admin/css/main.css}" />
        <link rel="stylesheet" th:href="@{/static/admin/css/user_index.css}" />
        <link rel="stylesheet" th:href="@{/static/admin/css/viewer.min.css}" />
        <script th:src="@{/static/js/vue.min.js}"></script>
        <script th:src="@{/static/js/axios.min.js}"></script>
        <script th:src="@{/static/js/jquery-3.3.1.min.js}"></script>
        <script th:src="@{/static/js/viewer.min.js}"></script>
        <script th:src="@{/static/bootstrap/js/bootstrap.bundle.js}"></script>
        <script th:src="@{/static/admin/js/config.js}"></script>
        <script th:src="@{/static/admin/js/hotel_script.js}"></script>
    </head>

    <body>
        <main>
            <div class="main">
                <div class="search" th:if="${session.user.roleName == 'Admin'}">
                    <form class="form-inline float-left" th:action="@{/hotel/index/1}" method="get">
                        <div class="form-group">
                            <select name="option">
                                <option value="hotel_id" th:selected="${map['option'] == 'hotel_id'}">ID</option>
                                <option value="hotel_name" th:selected="${map['option'] == 'hotel_name'}">名称</option>
                                <option value="address" th:selected="${map['option'] == 'address'}">地址</option>
                                <option value="phone" th:selected="${map['option'] == 'phone'}">电话</option>
                            </select>
                            <input style="margin: 0 4px" type="text" name="value" th:value="${map['value']}" class="form-control" v-model="" placeholdeclassr="输入关键字" />
                        </div>
                        <button type="submit" class="btn btn-primary"><i class="iconfont"> </i>搜索</button>
                    </form>
                    <a id="add" class="btn btn-secondary float-right disabled" href="javascript:;" th:if="${session.user.roleName == 'Admin'}"><i class="iconfont"> </i>新增酒店</a>
                </div>

                <div class="table-box" th:style="|display: ${#lists.isEmpty(page.records) ? 'flex' : 'block'};|">
                    <h1 th:if="${#lists.isEmpty(page.records)}" class="display-4" style="margin: auto">暂无酒店</h1>
                    <table th:unless="${#lists.isEmpty(page.records)}" class="table" style="text-align: center">
                        <thead>
                            <tr>
                                <th scope="col">ID</th>
                                <th scope="col">缩略图</th>
                                <th scope="col">酒店名称</th>
                                <th scope="col">经营者</th>
                                <th scope="col">地址</th>
                                <th scope="col">联系电话</th>
                                <th scope="col">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:each="hotel : ${page.records}">
                                <th th:text="${hotel.hotelId}" scope="row"></th>
                                <td class="pic">
                                    <div style="position: relative; display: inline-block" th:object="${hotel.getURL()}">
                                        <img alt="酒店缩略图" height="68.8px" th:src="@{*{[0]}}" />
                                        <span class="img_num" tabindex="0" th:text="|*{length}张|">3张</span>
                                    </div>
                                    <img style="display: none;" height="0" th:src="@{${url}}" th:each="url : ${hotel.getPicURL()}" />
                                </td>
                                <td><a title="点击查看酒店房间信息" th:href="@{/hotel/{s}/room/index/1(s=${hotel.hotelId},option=room_id,value=)}" th:text="${hotel.hotelName}"></a></td>
                                <td th:text="${hotel.manager}"></td>
                                <td th:text="${hotel.address}"></td>
                                <td th:text="${hotel.phone}"></td>
                                <td style="padding: 0.4rem">
                                    <button th:id="${hotel.hotelId}" class="modify">编辑</button>
                                    <button th:id="${hotel.hotelId}" class="delete">删除</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="page">
                    <span class="total float-left page-link" th:text="|共${page.total}条|">共23223条</span>
                    <ul class="pagination">
                        <li class="page-item"><a class="page-link" title="首页" th:if="${page.current > 1}" th:href="@{/hotel/index/1?option={s1}&value={s2}(s1=${map['option']},s2=${map['value']})}">&lt;&lt;</a></li>
                        <li class="page-item"><a class="page-link" title="前一页" th:if="${page.current > 1}" th:href="@{/hotel/index/{s}(s=${page.current-1},option=${map['option']},value=${map['value']})}">&lt;</a></li>
                        <span class="total float-left page-link"><span>[[${page.current}]]</span>/<span>[[${page.pages}]]</span></span>
                        <li class="page-item"><a class="page-link" title="后一页" th:if="${page.pages > page.current}" th:href="@{/hotel/index/{s}(s=${page.current+1},option=${map['option']},value=${map['value']})}">&gt;</a></li>
                        <li class="page-item"><a class="page-link" title="尾页" th:if="${page.pages > page.current}" th:href="@{/hotel/index/{s}(s=${page.pages},option=${map['option']},value=${map['value']})}">&gt;&gt;</a></li>
                    </ul>
                </div>
            </div>
        </main>
        <div class="mask"></div>
        <div class="register">
            <form>
                <div class="header">
                    <h2>添加酒店</h2>
                </div>
                <div class="body">
                    <input type="hidden" name="hotelId" v-model="hotelId" />
                    <div class="container">
                        <input id="hotelName" name="hotelName" type="text" v-model="hotelName" placeholder="请输入酒店名称（必填）" />
                        <span class="left"></span>
                        <span class="right"></span>
                        <span class="top"></span>
                        <span class="bottom"></span>
                    </div>
                    <div class="container">
                        <input id="managerId" name="managerId" type="number" v-model="managerId" placeholder="请输入经营者的UID（必填）" />
                        <span class="left"></span>
                        <span class="right"></span>
                        <span class="top"></span>
                        <span class="bottom"></span>
                    </div>
                    <div class="container">
                        <input id="address" name="address" type="text" v-model="address" placeholder="请输入酒店地址（必填）" />
                        <span class="left"></span>
                        <span class="right"></span>
                        <span class="top"></span>
                        <span class="bottom"></span>
                    </div>
                    <div class="container">
                        <input id="phone" name="phone" type="tel" v-model="phone" placeholder="请输入联系电话（必填）" />
                        <span class="left"></span>
                        <span class="right"></span>
                        <span class="top"></span>
                        <span class="bottom"></span>
                    </div>
                </div>
                <div class="footer">
                    <input type="button" id="cancel" class="btn btn-primary" value="取消" style="margin: 0 59.8px" />
                    <input type="button" id="submit" class="btn btn-primary" value="提交" style="margin: 0 59.8px" @click="JustDoIt" />
                </div>
            </form>
        </div>
        <script>
            $(".pic").viewer();
        </script>
    </body>
</html>
